$(function() {
    var styleText = '' +
        '.c-contextmenu{' +
        '  position: absolute;' +
        '  z-index: 99999;' +
        '}' +
        '.c-contextmenu .c-cm-list {' +
        '  border: solid 1px #CCCCCC; ' +
        '  background: #FFFFFF;' +
        '  box-shadow: 0px 0px 4px #ccc;' +
        '  width: 200px; ' +
        '}' +
        '.c-contextmenu .c-cm-item {' +
        '  border-bottom: solid 1px #CCCCCC;' +
        '  line-height: 24px;' +
        '  padding: 3px 5px;' +
        '  cursor: pointer;' +
        '  position: relative;' +
        '}' +
        '.c-contextmenu .c-cm-item:hover {' +
        '  background: #eeeeee;' +
        '}' +
        '.c-contextmenu .c-cm-item:last-child {' +
        '  border-bottom: none;' +
        '}' +
        '.c-contextmenu img {' +
        '  width: 20px;' +
        '  height:20px;' +
        '  margin-right: 3px;' +
        '  visibility: hidden;' +
        '  display: inline-block;' +
        '  vertical-align: middle;' +
        '}' +
        '.c-contextmenu img[src] {' +
        '  visibility: visible;' +
        '}      ' +
        '.c-contextmenu a {' +
        '  color: #000000;' +
        '  display: inline-block;' +
        '  vertical-align: middle;  ' +
        '  text-decoration: none;      ' +
        '}' +
        '.c-cm-arrow:after {' +
        '  position: absolute;' +
        '  right: 8px;' +
        '  top: 10px;' +
        '  content: "";' +
        '  width: 12px;' +
        '  height: 12px;' +
        '  border-top: solid 1px #bcbcbc;' +
        '  border-right: solid 1px #bcbcbc;' +
        '  transform: rotate(45deg);' +
        '  ' +
        '}' +
        '.c-cm-lv-2{' +
        '  position: absolute;' +
        '  top: 0;' +
        '  left: 100%;' +
        '}' +
        '.c-contextmenu-mask {' +
        '  position: fixed;' +
        '  z-index: 99998;' +
        '  top: 0;' +
        '  right: 0;' +
        '  left: 0;' +
        '  bottom: 0;' +
        '  height:100%;' +
        '  width: 100%;' +
        '}';

    var data;
    var menu = '<div class="c-contextmenu" style="display:none;"><div class="c-cm-list"></div></div><div class="c-contextmenu-mask" style="display: none;"></div>'
    var listTmpl = '<div class="c-cm-list" style="display:none;"></div>'
    var itemTmpl = '<div class="c-cm-item"><div><img /><a target="_top"></a></div></div>'

        function init() {
            data = getData()
            if (!data) {
                console.log('get data error');
                return;
            }
            create(data);
            bindEvent();
        }

        function getData() {
            var data;
            try {
                data = JSON.parse(sessionStorage["contextMenuData"]);
            } catch (e) {}
            return data;
        }

        function create(d) {
            var list = $(menu);
            for (var i = 0; i < d.length; i++) {
                var item = $(itemTmpl);
                var o = d[i];
                item.addClass("c-cm-arrow");
                item.find("a").text(o.menu_name)
                if (o.children && o.children.length) {
                    var subList = $(listTmpl);
                    subList.addClass("c-cm-lv-2");
                    for (var t = 0; t < o.children.length; t++) {
                        var n = o.children[t];
                        var subItem = $(itemTmpl);
                        subItem.find("a").text(n.menu_name).attr("href", n.menu_href_full);
                        subList.append(subItem);
                    }
                    item.append(subList);
                }
                list.children(".c-cm-list").append(item)
            }
            $(document.body).append(list);
            var h = $("<style></style>");
            h.html(styleText);
            $(document.body).append(h);
        }

        function bindEvent() {
            document.addEventListener("contextmenu", function(e) {
                var x = e.clientX;
                var y = e.clientY;
                $(".c-contextmenu").css("cssText", "display: block; left: " + x + "px;top: " + y + "px;");
                $(".c-contextmenu-mask").show();
                e.preventDefault();
            })
            $(".c-contextmenu-mask").on("click", function() {
                hideMenu();
            })
            $(".c-contextmenu").on("click", ".c-cm-item", function(e) {
                if ($(this).find("a[href]")[0]) {
                    hideMenu();
                }
                e.stopPropagation();
            })
                .on("ontextmenu", ".c-cm-item", function() {
                    e.stopPropagation();
                })
                .on("mouseenter", ".c-cm-item", function(e) {
                    $(this).children(".c-cm-list").show();
                })
                .on("mouseleave", ".c-cm-item", function(e) {
                    $(this).children(".c-cm-list").hide();
                })
        }

        function hideMenu() {
            $(".c-contextmenu-mask, .c-contextmenu").hide();
        }

    init();
});
